	<template>
	<div class="wy-main">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >基本资料</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<a-row type="flex"  align="middle" >
			<a-col :span="4"><p class="height-100" style='margin-right: 12px; text-align: right;'>登录名：</p></a-col>
			<a-col :span="4"><p class="height-100">{{userInfo.username}}</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col :span="4" ><p class="height-100" style='margin-right: 12px; text-align: right;'>用户身份：</p></a-col>
			<a-col :span="4"><p class="height-100">{{userInfo.type == 2?'企业':'个人'}}</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col :span="4"><p class="height-100" style='margin-right: 12px; text-align: right;'>真实姓名：</p></a-col>
			<a-col :span="4"><p class="height-100">{{userInfo.nickName}}</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col :span="4"><p class="height-100" style='margin-right: 12px; text-align: right;'>手机号码：</p></a-col>
			<a-col :span="4"><p class="height-100">{{userInfo.mobile}}</p></a-col>
		</a-row>
		
		<a-form :form="form" @submit="handleSubmit" class="wy-form" >
				<a-row class="wy-main-title">
					<a-col :span="24">
						<p class="title-p">
							<a-divider class="title-vertical"  type="vertical" />
							<span class="title-span" >业务信息</span>
							<a-divider class="title-divider"  />
						</p>
					</a-col>
				</a-row>
				<a-form-item v-bind="formItemLayout" label="所属行业">
					<a-select :disabled="disabled" v-decorator="[
			          'trade',
			          {rules: [{ required: true, message: '请选择所属行业!' }]}
			        ]" placeholder="请选择">
			       		<a-select-option value="">请选择</a-select-option>
		     		 	<a-select-option :value="item.dictKey" v-for="(item,index) in industryList"  :key="index">{{item.dictValue}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }" label="主营业务" >
					<span style="position: absolute; z-index: 10;right: 10px; bottom:-10px;">{{textLength}}/400</span>
					<a-textarea :disabled="disabled" placeholder="提示：最多不超过400个字" maxlength="400" ref="textarea" @keyup="mainBusinessText"  v-decorator="[ 'mainBusiness', { rules: [ {required: true, message: '主营业务不能为空！',}]}]" :autosize="{ minRows: 6, maxRows: 10 }" >
					</a-textarea>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="网址" >
					<a-input :disabled="disabled" maxlength="256" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"  placeholder="http://" v-decorator="[ 'companyWebsite']" />
				</a-form-item>
				<a-row class="wy-main-title">
					<a-col :span="24">
						<p class="title-p">
							<a-divider class="title-vertical"  type="vertical" />
							<span class="title-span" >补充信息</span>
							<a-divider class="title-divider"  />
						</p>
					</a-col>
				</a-row>
				<a-form-item v-bind="formItemLayout" label="国家/地区" >
				    <a-select :disabled="disabled" placeholder='请选择' @change="getProvince"  v-decorator="[ 'country']" >
				      <a-select-option value="" >请选择</a-select-option>
				      <a-select-option :value="item.areaId" v-for="(item,index) in countryList"  :key="index">{{item.name}}</a-select-option>
				    </a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="所在地区">
					<a-row :gutter="8" class="wy-select-min">
						<a-col :span="24">
						    <a-select :disabled="disabled" placeholder='请选择'  @change="getCity"  v-decorator="[ 'province']" class="w-140">
				      			<a-select-option value="" >请选择</a-select-option>
				     		  	<a-select-option :value="item.areaId" v-for="(item,index) in provinceList"  :key="index">{{item.name}}</a-select-option>
						    </a-select>
						    <a-select :disabled="disabled" placeholder='请选择'  v-decorator="[ 'city']" class="w-140">
				      			<a-select-option value="" >请选择</a-select-option>
				     		 	<a-select-option :value="item.areaId" v-for="(item,index) in cityList"  :key="index">{{item.name}}</a-select-option>
						    </a-select>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="街道地址"  >
					<a-input :disabled="disabled" maxlength="128" v-decorator="[ 'address']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="固定电话"   >
					<a-input :disabled="disabled" maxlength="12" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'')" v-decorator="[ 'landline']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="传真"   >
					<a-input :disabled="disabled" maxlength="11"  onkeyup="this.value=this.value.replace(/[^0-9-]+/,'')"  v-decorator="[ 'fax']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="QQ"   >
					<a-input :disabled="disabled" maxlength="12" onkeyup="this.value=this.value.replace(/\D/g,'')" v-decorator="[ 'qq']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="微信"   >
					<a-input :disabled="disabled" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" v-decorator="[ 'wechat']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="电子邮箱"   >
					<a-input :disabled="disabled" v-decorator="[ 'email',{rules: [{validator:checkMail}]}]" placeholder='请填写' />
				</a-form-item>
				<a-row style="margin-top: 10px;">
					<a-col :span="24">
						<p style="margin: 0;">
							<a-divider style="width: 95%;margin-left: 20px;" />
						</p>
					</a-col>
				</a-row>
				<a-form-item v-bind="formItemLayout" label="协议" class="wy-agreement"  >
					<a-checkbox :disabled="disabled" v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
						我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
					</a-checkbox>
				</a-form-item>
				<div class="ant-row ant-form-item">
					<div class="ant-col-4 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button :disabled="disabled" type="primary" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
									保存
								</a-button>
							</span>
						</div>
					</div>
				</div>
				<!--<a-checkbox style="margin-left: 40px;"  v-decorator="['agreement', {valuePropName: 'checked'}]" >
					本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！
				</a-checkbox>
				<a-form-item style="text-align: center;margin-top: 20px;" >
					<a-button type="primary" html-type="submit" style="width: 200px;" >
						立即认证
					</a-button>
				</a-form-item>-->
		</a-form>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	
	export default {
		components: {
			Web,
			User
		},
		data() {
			return {
				disabled:false,
				industryList:[],
				webShow:false,
				userShow:false,
				countryList:[],
				cityList:[],
				provinceList:[],
				textLength:0,
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 14
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 14,
							offset: 2,
						},
					},
				},
				userInfo: {}
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		watch:{
		},
		computed: {
		    ...mapState({
		      user: state => state.account.user,
		    })
		},
		created(){
			this.getCommonDict(25);
			this.getUserInfo();
			this.gitArea()
		},
		methods: {
			// 字典表接口 
			getCommonDict (type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this.loading = false
					this.industryList = r.data.data.rows; 
				}).catch((e) => {
					this.loading = false;
				})
			},
			// 关闭协议弹窗
			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			// 校验邮箱
			checkMail:checkEmail,
			// 获取基本资料信息
			getUserInfo() {
				this.$get('/userinfo/open/username/'+this.user.username).then((r) => {
					const d = r.data.data;
//					setTimeout(()=>{
//						this.form.setFieldsValue({
//							capitalSource:datail.capitalSource,
//							fromCity:datail.fromCity,
//							linkEmail:datail.linkEmail,
//							linkMan:datail.linkMan,
//							linkMobile:datail.linkMobile,
//							linkQq:datail.linkQq,
//							tendContent:datail.tendContent,
//							tendNo:datail.tendNo,
//							linkFax:datail.linkFax,
//							tenderingTime:[moment(datail.startTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.endTime,'YYYY-MM-DD HH:mm:ss')],
//							bidTime:[moment(datail.openTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.stopTime,'YYYY-MM-DD HH:mm:ss')],
//							tendPrice:datail.tendPrice,
//							tendTitle:datail.tendTitle,
//							toCity:datail.toCity,
//							transType:datail.transType+'',
//						});
//			        },0)
	            	this.form.setFieldsValue({
	            		username:d.username,
						address: d.address,
						companyWebsite: d.companyWebsite,
						email: d.email,
						fax: d.fax,
						landline: d.landline,
//						trade: String(d.trade||''),
						trade: d.trade||'',
						mainBusiness: d.mainBusiness,
						qq: d.qq,
						username: d.username,
						wechat: d.wechat
	            	});
//	            	if(d.approvalStatus == 106){
//	            		this.disabled = true
//	            	}else{
//	            		this.disabled = false
//	            	}
	            	if(d.mainBusiness){
	            		let str = d.mainBusiness.replace(/[^\x00-\xff]/g,"aa");
						this.textLength = str.length
	            	}
	            	if(d.country)this.form.setFieldsValue({country: parseInt(d.country)});
	            	if(d.province)this.form.setFieldsValue({province: parseInt(d.province)});
		            if(d.city)this.form.setFieldsValue({city: parseInt(d.city)});
	            	this.userInfo = d
	            	if (d.country) this.giturl('provinceList',d.country)
	            	if (d.province) this.giturl('cityList',d.province)
	            }).catch((e) => {})
			},
			// 获取基本资料信息
			setUserInfo(values) {
				this.$put('/userinfo/',values,true).then((r) => {
//					this.$message.success(r.data.message)
					this.$message.success('基本资料提交成功，请等待审核结果！')
					this.getUserInfo()
	            }).catch((e) => {})
			},
			// 获取textarea输入的字符长度
			mainBusinessText (e){
				let str = this.$refs.textarea.value.replace(/[^\x00-\xff]/g,"aa");
				this.textLength = str.length
//				if(this.textLength >= 40){
//					this.form.setFieldsValue({
//						mainBusiness: 111,
//	            	});
//				}
			},
			// 获取国家地区
			gitArea(){
				var val = {upid:0}
				this.$get('/info/area',val).then((r) => {
					this.countryList = r.data.data
	            }).catch((e) => {})
			},
			// 获取省级区域
			getProvince(value){
				this.form.setFieldsValue({
					province: '',
					city:''
				})
				this.giturl('provinceList',value)
//				this.giturl('cityList','')
				this.cityList = []
//				var val = {upid:value}
//				this.$get('/info/area',val).then((r) => {
//					this.provinceList = r.data.data
//	            }).catch((e) => {})
			},
			// 获取市级区域
			getCity(value){
				this.form.setFieldsValue({
					city:''
				})
				this.giturl('cityList',value)
//				var val = {upid:value}
//				this.$get('/info/area',val).then((r) => {
//					this.cityList = r.data.data
//	            }).catch((e) => {})
			},
			giturl(name,value){
				var val = {upid:value}
				this.$get('/info/area',val).then((r) => {
					this[name] = r.data.data
	            }).catch((e) => {})
			},
			// 保存基本信息
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
						values.username = this.user.username;
						values.ssex = this.userInfo.ssex;
						values.userId = this.userInfo.userId;
						values.status = this.userInfo.status;
						this.setUserInfo(values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 0 20px 40px 20px;
		background: #fff;
		.cont_title{
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
		}
	}
</style>